<template>
  <div class="class-table">
    <div class="table-wrapper">
      <div class="tabel-container">

        <table>
          <thead>
          <tr>
            <th>时间</th>
            <th v-for="(weekNum, weekIndex) in classTableData.courses.length" :key="weekIndex"> {{'周' + digital2Chinese(weekIndex, 'week')}}</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(lesson, lessonIndex) in classTableData.lessons" :key="lessonIndex">
            <td>
              <p>{{'第' + digital2Chinese(lessonIndex+1) + "节"}}</p>
              <p class="period">{{ lesson }}</p>
            </td>

            <td v-for="(course, courseIndex) in classTableData.courses" :key="courseIndex">
              {{classTableData.courses[courseIndex][lessonIndex] || '---'}}
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
  import Api from '../common/api'
  export default {
    name: "mine-class",
    data() {
      return {
        user:'',
        courses:[],
        classTableData: {
          lessons: [
            '08:00-08:45',
            '08:55-09:40',
            '10:10-10:55',
            '11:05-11:50',
            '14:00-14:45',
            '15:10-15:40',
            '16:10-16:55',
            '17:05-17:50',
            '18:30-19:15',
            '19:25-20:10',
            '20:15-21:00'
          ],
          courses: []
        }

      };
    },
    created() {
      let user=Api.getStorageItem("user");
      this.user=user;
      // console.log('how are you india',user);
      Api.apiCall('get','/course/get_classes/'+this.user.id+'/'+this.user.type).then((resolve)=>{
        this.courses=resolve.data.data.courses;
        // console.log('how are you india',this.courses[0])
        for(let i=0;i<7;i++){
          this.classTableData.courses.push(['','','','','','','','','','','']);
        }
        for(let i=0;i<this.courses.length;i++){
          let course=this.courses[i];
          for(let j=0;j<course.times.length;j++){
            let classTime=course.times[j];
            let time = new Date(classTime.classTime);
            let num=time.getDay();
            let hour=time.getHours();
            let min=time.getMinutes()+1;
            // console.log("星期",time.getDay(),''+hour+'-'+min);
            // console.log((''+hour+':'+min)>'15:29-15:40',(''+hour+':'+min)>'15:30-15:40');
            console.log('course:',course.title,time,(''+hour+':'+min));
            hour=hour>9?''+hour:'0'+hour;
            min=min>9?''+min:'0'+min;
            for(let k=1;k<=11;k++){
              if((''+hour+':'+min)<this.classTableData.lessons[k]&&(''+hour+':'+min)>this.classTableData.lessons[k-1]){
                this.classTableData.courses[num][k]=(course.title);
                this.classTableData.courses[num][k-1]=(course.title);
                // console.log('course:',course.title,time);
                break;
              }
            }
          }
        }
        console.log(this.classTableData)
      },(reject)=>{
        console.log('错误信息',reject);
        this.$message.error("加载课程信息出错，请检查网络")
      })

    },
    methods: {
      // getWeek(dateString) {
      //   let dateArray = dateString.split("-");
      //   date = new Date(dateArray[0], parseInt(dateArray[1] - 1), dateArray[2]);
      //   return "周" + "0123456".charAt(date.getDay());
      // },
      /**
       * 数字转中文
       * @param {Number} num 需要转换的数字
       * @param {String} identifier 标识符
       * @returns {String} 转换后的中文
       */
      digital2Chinese(num, identifier) {
        const character = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'];
        return identifier === 'week' && (num === 0 || num === 7) ? '日' : character[num];
      }
    }
  };
</script>

<style lang="scss" scoped>
  .class-table {
    .table-wrapper {
      width: 100%;
      height: 100%;
      overflow: auto;
    }
    .tabel-container {
      margin: 5px;

      table {
        table-layout: fixed;
        width: 100%;
        thead {
          background-color: #67a1ff;
          th {
            color: #fff;
            line-height: 17px;
            font-weight: normal;
          }
        }
        tbody {
          background-color: #eaf2ff;
          td {
            color: #677998;
            line-height: 12px;
          }
        }
        th,
        td {
          width: 60px;
          padding: 0 2px;
          font-size: 12px;
          text-align: center;
        }

        tr td:first-child {
          color: #333;
          .period {
            font-size: 8px;
          }
        }
      }
    }
  }
</style>
